<div class="trafic-alert">
    <div>
        <div class="toolSet">
            <div class="toolSetLeft">
                <div class="buttonSet">
                    <div class="table-buttons-left">
                        <!-- <div class="operate" (click)="changeItemStatus(true)" *ngIf='accessButton.Ack' >
                            <i class="iconfontmore icon-queren"></i>{{'TrafficManagement.TrafficAlert.Ack' | translate}}</div>
                        <div class="operate" (click)="changeItemStatus(false)" *ngIf='accessButton.Ignore'>
                            <i class="iconfontmore icon-icon-ignore"></i>{{'TrafficManagement.TrafficAlert.Ignore' | translate}}</div>
                        <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div>
                        <nz-switch class="switch" [(ngModel)]="alertSwitch" (ngModelChange)="changeSwitch()" nzCheckedChildren="{{'TrafficManagement.TrafficAlert.ON' | translate}}" nzUnCheckedChildren="{{'TrafficManagement.TrafficAlert.OFF' | translate}}"></nz-switch> -->

                        <button class="op-btn" nz-button nzType="primary" (click)="changeItemStatus(true)"
                            *ngIf='accessButton.Ack'>
                            <i nz-icon nzType="check" nzTheme="outline"></i>{{'TrafficManagement.TrafficAlert.Ack' |
                            translate}}
                        </button>

                        <button class="op-btn" nz-button nzType="primary" (click)="changeItemStatus(false)"
                            *ngIf='accessButton.Ignore'>
                            <i nz-icon nzType="issues-close"
                                nzTheme="outline"></i>{{'TrafficManagement.TrafficAlert.Ignore' | translate}}
                        </button>

                        <button class="op-btn" nz-button nzType="primary" nzShape="circle" (click)="refresh()">
                            <i nz-icon nzType="reload" nzTheme="outline"></i>
                        </button>
<!--                         
                        <nz-switch [(ngModel)]="alertSwitch" (ngModelChange)="changeSwitch()"
                            nzCheckedChildren="{{'TrafficManagement.TrafficAlert.ON' | translate}}"
                            nzUnCheckedChildren="{{'TrafficManagement.TrafficAlert.OFF' | translate}}"></nz-switch> -->
                    </div>
                </div>
            </div>
            <div class="toolSetRight">
                <itmp-toolbar [toolbarList]="toolbarList" eventType="alert-position" [selectData]="selectItem"
                    [accessButton]='accessButton' exportName="trafficAlert" [searchData]="queryData.condition">
                </itmp-toolbar>
            </div>
        </div>
    </div>
    <nz-table #basicTable id="nzTable" [nzShowPagination]="false" [nzFrontPagination]="false" [nzData]="listOfData">
        <thead>
            <tr>
                <ng-container *ngFor="let item of renderHeader;">
                    <th *ngIf="item.name != 'Alert Source' && item.name !== 'Description' && item.name != 'Detection Date' && item.name != 'Ack Date'"
                        class="listTitle">
                        <div>{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
                        <div class="no-print" style="padding-top: 0.1rem"><input nz-input placeholder=""
                                [(ngModel)]="item.key" (ngModelChange)="filterSearch()" /></div>
                    </th>
                    <th *ngIf="item.name === 'Alert Source'" class="listTitle">
                        <div>{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
                        <div class="no-print" style="padding-top: 0.1rem">
                            <nz-select style="width: 1rem" [(ngModel)]="item.key" (ngModelChange)='filterSearch()'
                                [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear>
                                <nz-option *ngFor="let option of alertSourceList"
                                    [nzLabel]="'Share.'+option.label|translate" [nzValue]="option.value"></nz-option>
                            </nz-select>
                        </div>
                    </th>
                    <th *ngIf="item.name === 'Description'" class="listTitle">
                        <div>{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
                        <div class="no-print" style="padding-top: 0.1rem">
                            <nz-select style="width: 1rem" [(ngModel)]="item.key" (ngModelChange)='filterSearch()'
                                [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear
                                [nzDropdownMatchSelectWidth]="false">
                                <nz-option *ngFor="let option of description"
                                    [nzLabel]="'TrafficManagement.TrafficAlert.'+option.name|translate"
                                    [nzValue]="option.name"></nz-option>
                            </nz-select>
                        </div>
                    </th>
                    <th *ngIf="item.name === 'Detection Date'" class="listTitle">
                        <div>{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
                        <div class="no-print" style="padding-top: 0.1rem">
                            <nz-range-picker nzSize="default" [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"
                                [nzDisabledDate]="disabledDate" [nzStyle]="{width:'260px'}"></nz-range-picker>
                        </div>
                    </th>
                    <th *ngIf="item.name === 'Ack Date'" class="listTitle">
                        <div>{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
                        <div class="no-print" style="padding-top: 0.1rem">
                            <nz-range-picker nzSize="default" [(ngModel)]="dateRangeAck"
                                (ngModelChange)="onAckChange($event)" [nzStyle]="{width:'260px'}"
                                [nzDisabledDate]="disabledDate"></nz-range-picker>
                        </div>
                    </th>
                </ng-container>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of basicTable.data;let idx = index" (click)="showDetail(data)"
                [ngClass]="{'active':data.alertID == editingItem, 'highLight': data.alertID == alertId}">
                <td>{{ data.detectionTime | date:'yyyy/MM/dd HH:mm' }}</td>
                <td [title]="data.alertID">
                    <div style="word-break: break-word;max-width: 480px" class="text-ellipsis">{{ data.alertID }}</div>
                </td>
                <td>{{ data.zoneID }}</td>
                <td>{{ data.roadName }}</td>
                <td>{{ !isShowVietName?data.alertDescription:data.vietAlertDescription}}</td>
                <td>{{ 'EquipmentManagement.equipmentAlarm.'+data.alertSource | translate}}</td>
            </tr>
        </tbody>
        <tfoot class="traffic-alert-page-footer">
            <tr>
                <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
                    <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
                        [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
                        (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)">
                    </itmp-pagination>
                </td>
            </tr>
        </tfoot>
    </nz-table>
</div>
<nz-modal [(nzVisible)]="isForceVisible" class="change-dialog"
    nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}"
    (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceHandleOk()">
    <div>
        {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
    </div>
</nz-modal>